<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on指令学习</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <!--
    功能:
        给元素绑定事件.
    说明:
        1. 绑定事件的写法为:
            - 写法一: `v-on:事件名称=vue实例的methods属性中定义的函数的名称`;
            - 写法二: `@:事件名称=vue实例的methods属性中定义的函数的名称`.
        2. 事件说明:
            - click: 点击事件;
            - dblclick: 双击事件.
    -->
    <input type="button" value="按钮1" v-on:click="showInfo" />
    <input type="button" value="按钮2" v-on:click="loopControl" />
    <input type="button" value="按钮3" @click="showInfo" />
    <input type="button" value="按钮4" @dblclick="showInfo" />

    <div title="添加自定义参数" style="margin-top: 200px">
        <button v-on:click="customParameters(1, 2)">点击测试-添加自定义参数</button>
    </div>

    <!--
    功能:
        有一些特殊的时间需要限制特性的触发.
    说明:
        1. 下面的例子就是在用户输入用户名和密码后在密码框中按下回车之后会触发对应的函数.
    -->
    <div title="事件修饰符" style="margin-top: 200px">
        <input type="text" placeholder="请输入用户名" /><br />
        <input type="password" placeholder="请输入密码" @keyup.13="logIn" />
        <span>上面的输入框绑定了回车键上弹监听事件, 意思是输入密码后按下回车就可以登录了</span>
    </div>

</div>
</body>
<script>

    let app1 = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            flag: true
        },
        //注意名称是methods不是method
        methods: {
            showInfo: function () {
                //alert(message); //这样写会报错: ReferenceError: flag is not defined
                alert(this.message);
            },
            loopControl: function () {
                if(this.flag) {
                    this.message = 'flag=true';
                    this.flag = false;
                } else {
                    this.message = 'flag=false';
                    this.flag = true;
                }
                alert(this.message);
            },
            customParameters: function (param1, param2) {
                console.log(param1, param2);
            },
            logIn: function () {
                console.log('进行登录');
            }
        }
    });

</script>
</html>